{extend name="layout:common" /}
{block name="css"}
    {__block__}
    {load href="/static/css/index.css"/}
<style>
    header{
        display: flex;
        align-items: center;
        min-height: 50%!important;
    }
    #jssor_1 *{
        border-radius: 12px;
    }
</style>
{/block}
{block name="nav"}
    <nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-menu">
                    <span class="sr-only">Toggle navigation</span><i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand page-scroll" href="#page-top"><img src="__CDN__/static/images/logo-0.jpg" style="width:200px;" alt=""></a>
            </div>

            <div class="collapse navbar-collapse" id="navbar-collapse-menu">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/">首页</a></li>
                    <li><a href="/">热量计算</a></li>
                    <li><a href="{:url('index/user/index')}">个人中心</a></li>
                    <li><a href="{:url('/comment')}">网友反馈</a></li>
                    <li><a href="/">关于我们</a></li>
                    <li>
                        <form action="{:url('/list')}">
                            <input type="search" class="form-control" placeholder="输入菜名" name="name" style="margin-top: 8px">
                        </form>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
{/block}
{block name="header"}
    <header>
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="header-content">
                        <div class="header-content-inner">
                            <h1>走胃更走心</h1>
                            <h3>吃得健康又营养!</h3>
                            <a href="#features" class="btn btn-warning btn-xl page-scroll">菜谱大全</a>
                            <a href="#" class="btn btn-outline btn-xl page-scroll">早餐推荐</a><br>
                            <a href="#" class="btn btn-outline btn-xl page-scroll">中餐推荐</a>
                            <a href="#" class="btn btn-outline btn-xl page-scroll">晚餐推荐</a>
                            <a href="" class="btn btn-outline btn-xl page-scroll">加餐推荐</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
                <div id="jssor_1" style="width:780px;height:360px;overflow:hidden;">
                    <div data-u="slides" style="width:780px;height:360px;overflow:hidden;">
                        <div><img data-u="image" src="/static/images/slide1.jpg" class="lazyload"/></div>
                        <div><img data-u="image" src="/static/images/slide2.jpg" class="lazyload"/></div>
                        <div><img data-u="image" src="/static/images/slide3.jpg" class="lazyload"/></div>
                        <div><img data-u="image" src="/static/images/slide4.jpg" class="lazyload"/></div>
                        <div><img data-u="image" src="/static/images/slide5.jpg" class="lazyload"/></div>
                    </div>
                </div>
        </div>
    </header>
{/block}
{block name="content"}
        <section id="features" class="features">
            <div class="container">
                <div class="tab">
                    <ul>
                        {volist name="categories" id="category" key="k"}
                            {if condition="$k == 1"}
                                <li class="tab-item active">{$category:name}<span>◆</span></li>
                            {else/}
                                <li class="tab-item">{$category:name}<span>◆</span></li>
                            {/if}
                        {/volist}
                    </ul>
                </div>
                <div class="menu">
                    {volist name="res" id="items" key="key"}
                    {if condition="$key == 2"}
                    <div class="main{$key-1} product">
                        <ul>
                            {volist name="items" id="item" key="k"}
                            <li>
                                <a href="{:url('/show/'.$item.id)}"><img src="{$item.image}" alt="" class="lazyload" style="border-radius: 6px"><p>{$item.name}</p></a>
                            </li>
                            {/volist}
                            <div style="clear: both"></div>
                        </ul>
                    </div>
                    {else /}
                    <div class="main{$key-1} product" style="display: none;">
                        <div class="main">
                            <ul>
                                {volist name="items" id="item" key="k"}
                                <li>
                                    <a href="{:url('/show/'.$item.id)}"><img src="{$item['image']}" alt="" class="lazyload"  data-original="/static/images/lazyload.gif" style="border-radius: 6px"><p>{$item.name}</p></a>
                                </li>
                                {/volist}
                                <div style="clear: both"></div>
                            </ul>
                        </div>
                    </div>
                    {/if}
                    {/volist}
                </div>
            </div>
        </section>
        <section class="cta">
            <div class="cta-content">
                <div class="container">
                    <h2>走胃更走心</h2>
                    <h3>吃得健康又营养!</h3>
                    <a href="{:url('/admin/index')}" class="btn btn-outline btn-xl page-scroll">进入后台</a>
                </div>
            </div>
            <div class="overlay"></div>
        </section>
{/block}
{block name="js"}
    {__block__}
    <script src="/static/js/slider.min.js"></script>
    <script>
        $(function () {
            $(window).on("scroll", function () {
                $("#mainNav").toggleClass("affix", $(window).height()/2 - $(window).scrollTop() <= 50);
            });
        });
    </script>
    <script>
        $(function () {
            $(".tab>li").mouseenter(function () {
                $(this).addClass("active").siblings("li").removeClass("active");
                $(".menu div").eq($(this).index()).addClass("selected").siblings("div").removeClass("selected");
            });
            $('.tab-item').click(function () {
                $(this).addClass('active').siblings().removeClass('active');
                var index = $(this).index();
                $('.main' + (index + 1)).show().siblings().hide()
            });

            $('.searchBtn').click(function() {
                $(this).prev().submit()
            });

            var options = {
                $AutoPlay: 1
            };
            var jssor_1_slider = new $JssorSlider$("jssor_1", options);
        });
    </script>
{/block}